<template>
  <div ref="appContainer" class="app-container">
    <PropTable :loading="loading" :columns="baseColumns" :total="total" :data="list" @reset="reset" @on-submit="onSubmit">
      <template #btn>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="exportExcelTable">
            <el-icon><Download /></el-icon> 导出列表</el-button
          >
        </div>
      </template>
      <template #operate="{ row }">
        <el-button v-if="row.repairStatus == 'ARREARS'" link type="primary" size="small" @click="open(row)"> 取消订单 </el-button>
        <el-button v-else link type="primary" size="small">不可操作</el-button>
      </template>
    </PropTable>
  </div>
</template>
<script lang="ts" setup name="repairManage">
  import { getRepairList, operateOrder } from '@/api/repairList'
  import { columns } from './constants'
  import { showMessageConfirm, showMessage } from '@/utils/element'
  import { exportExcel, getAllDta } from '@/utils/exprotExcel'
  import { getValueById } from '@/utils/database'
  const loading = ref(true)
  const appContainer = ref(null)

  const data = []
  const total = ref(0)
  let baseColumns = reactive(columns)
  const list = ref(data)
  //获取列表信息
  const getTableList = (data) => {
    getRepairList(data).then((res) => {
      list.value = res.records
      total.value = res.total
    })
  }
  //导出列表数据

  const exportExcelTable = async () => {
    try {
      const allData = await getAllDta(getRepairList, { ...serarchData.value })
      const newdata = []
      allData.forEach((item) => {
        newdata.push({
          ...item,
          repairStatus: getValueById('weixiudanzhuangtai', item.repairStatus),
          repairOrderType: getValueById('weixiudanleixing', item.repairOrderType),
        })
      })
      exportExcel({ column: columns, data: newdata, filename: '维修单管理', autoWidth: 100, format: 'xlsx' })
    } catch (error) {
      console.error('Error fetching data:', error)
    }
  }
  //重置
  const reset = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  const serarchData = ref({})
  //查询
  const onSubmit = (val) => {
    loading.value = true
    const data = JSON.parse(JSON.stringify(val))
    serarchData.value = val
    for (let key in data) {
      if (Array.isArray(data[key])) {
        const a = data[key]
        data[key] = a.toString()
      }
    }
    getTableList(data)
    setTimeout(() => {
      loading.value = false
    }, 500)
  }

  onMounted(() => {
    // for (let item of baseColumns) {
    //   if (item.search) {
    //     item.value = ''
    //   }
    // }
    // nextTick(() => {
    //   serarchData.value = { pageSize: 20, pageNum: 1 }
    //   getTableList({ pageSize: 20, pageNum: 1 })
    // })
    // setTimeout(() => {
    //   loading.value = false
    // }, 500)
  })
  const open = (row) => {
    showMessageConfirm(
      '提示',
      '是否确认取消该订单?',
      '确认取消',
      '暂不取消',
      () => {
        operateOrder(row.repairOrderNo, { canceled: true }).then((res) => {
          if (res) {
            onSubmit(serarchData.value)
            ElMessage({
              type: 'success',
              message: '取消成功',
            })
          }
        })
      },
      () => {},
    )
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
